<template>
  <van-row class="main-menu">
    <van-nav-bar left-text="返回" :title="assessType === $vo.AssessType.CORP + '' ? '考核评分(公司·单位)' : '考核评分(单位·部门)'" @click-left="doBack"/>
    <van-row class="menu-content">
      <van-grid :column-num="3">
        <van-grid-item :to="'/grade/' + assessType + '/' + $vo.OperateType.GRADE">
          <van-icon slot="icon" class-prefix="cspg" name="score-query cspg-color-blue" size="48" />
          <van-row slot="text" class="grid-item-text">考评</van-row>
        </van-grid-item>
        <van-grid-item :to="'/grade/' + assessType + '/' + $vo.OperateType.FEEDBACK">
          <van-icon slot="icon" class-prefix="cspg" name="score-query cspg-color-blue" size="48" />
          <van-row slot="text" class="grid-item-text">考评查询</van-row>
        </van-grid-item>
        <template v-if="assessType === $vo.AssessType.CORP + ''">
          <van-grid-item v-if="$store.state.authInfo.user.roles.corp.dept.length > 0" :to="'/raise/' + assessType + '/' + $vo.OperateType.APPLY">
            <van-icon slot="icon" class-prefix="cspg" name="add-score cspg-color-blue" size="48" />
            <van-row slot="text" class="grid-item-text">加分申请</van-row>
          </van-grid-item>
        </template>
        <template v-else>
          <van-grid-item v-if="$store.state.authInfo.user.roles.dept.dept.length > 0" :to="'/raise/' + assessType + '/' + $vo.OperateType.APPLY">
            <van-icon slot="icon" class-prefix="cspg" name="add-score cspg-color-blue" size="48" />
            <van-row slot="text" class="grid-item-text">加分申请</van-row>
          </van-grid-item>
        </template>
        <van-grid-item :to="'/check/' + assessType">
          <van-icon slot="icon" class-prefix="cspg" name="score-ratify cspg-color-yellow" size="48" />
          <van-row slot="text" class="grid-item-text">{{assessType === $vo.AssessType.CORP + '' ? '公司审核' : '考核部门审核'}}</van-row>
<!--          <van-row slot="text" class="grid-item-text">考评审核</van-row>-->
        </van-grid-item>
        <van-grid-item :to="'/approve/' + assessType">
          <van-icon slot="icon" class-prefix="cspg" name="score-ratify cspg-color-yellow" size="48" />
          <van-row slot="text" class="grid-item-text">{{assessType === $vo.AssessType.CORP + '' ? '单位审核' : '被考核部门审核'}}</van-row>
<!--          <van-row slot="text" class="grid-item-text">反馈审核</van-row>-->
        </van-grid-item>
        <van-grid-item :to="'/raise-approve/' + assessType">
          <van-icon slot="icon" class-prefix="cspg" name="score-ratify cspg-color-yellow" size="48" />
          <van-row slot="text" class="grid-item-text">
            <van-row>
              加分审核
            </van-row>
            <van-row>
              {{assessType === $vo.AssessType.CORP + '' ? '（公司·单位）' : '（单位·部门）'}}
            </van-row>
          </van-row>
        </van-grid-item>
      </van-grid>
    </van-row>
    <van-dialog style="width: 90%" v-model="showDialog" title="请选择操作部门" show-cancel-button @confirm="doSelectedDept" @cancel="$router.back()" :before-close="verifyOperate">
      <van-radio-group v-model="selectedDept">
        <van-cell-group style="margin-top: 20px" :border="false">
          <card-main-dept
            v-for="(depart) in deptList"
            :key="depart.department_path"
            :department="depart"
            @onClick="startSelectDept(depart)"/>
        </van-cell-group>
      </van-radio-group>
      <van-row style="font-size: 12px;color: red;text-align: center;height:30px; line-height: 30px">{{showError ? '请选择一个部门' : ''}}</van-row>
    </van-dialog>
  </van-row>
</template>

<script>
import CardMainDept from '@/views/common/card/CardMainDept'
export default {
  name: 'MainMenu',
  components: { CardMainDept },
  props: ['assessType'],
  data () {
    return {
      showError: false,
      showDialog: false,
      deptList: [],
      selectedDept: null
    }
  },
  mounted () {
    if (this.$store.state.authInfo.currentDept) {
      return
    }
    let list = []
    if (this.assessType === this.$vo.AssessType.CORP + '') {
      list = this.$store.state.authInfo.user.roles.corp.dept.concat(this.$store.state.authInfo.user.roles.corp.assess_dept)
      console.log(list)
    } else {
      list = this.$store.state.authInfo.user.roles.dept.dept.concat(this.$store.state.authInfo.user.roles.dept.assess_dept)
    }
    this.deptList = this.filterRepeat(list, 'department_path')
    if (this.deptList.length === 1) {
      this.$store.commit('authInfo/setCurrentDept', this.deptList[0])
    } else {
      this.showDialog = true
    }
    console.log(this.deptList)
  },
  methods: {
    filterRepeat (arr, prop) {
      return arr.filter(function (element, index, self) {
        return self.findIndex(el => el[prop] === element[prop]) === index
      })
    },
    verifyOperate (action, done) {
      if (action === 'confirm' && !this.selectedDept) {
        this.showError = true
        done(false)
      } else {
        done()
      }
    },
    startSelectDept (depart) {
      this.showError = false
      this.selectedDept = depart
    },
    doSelectedDept () {
      if (this.selectedDept) {
        this.$store.commit('authInfo/setCurrentDept', this.selectedDept)
      }
    },
    doBack () {
      this.$store.commit('authInfo/delCurrentDept')
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
  .main-menu{
    background-color: #F9F9F9;
    .menu-content {
      background-color: #FFFFFF;
      .grid-item-text{
        text-align: center;
        font-size: 14px;
        margin: 5px 0px;
      }
    }
  }
</style>
